<template>
  <BlankLayout>
    <div class="register">
      <div class="logo">
        <img src="/images/logo.svg" alt="logo" />
      </div>
      <div class="title"><span class="blod">欢迎注册登录</span></div>
      <div class="tips">没有账户？<router-link to="/register" class="login-link">免费注册</router-link></div>

      <el-form :model="formData" :rules="rules" ref="formRef" @submit.native.prevent="handleSubmit(formRef)">
        <el-form-item v-if="!isPasswordLogin">
          <div class="login-option" @click="loginWithWeChat">
            <img src="/images/login/wx.png" alt="" />
            继续使用微信登录
          </div>
          <div class="login-option" @click="loginWithEmailCode">
            <img src="/images/login/email.png" alt="" />
            使用邮箱验证登录
          </div>
          <div class="login-option" @click="loginWithSMS">
            <img src="/images/login/phone.png" alt="" />
            使用短信验证登录
          </div>
        </el-form-item>

        <el-form-item v-if="isPasswordLogin">
          <el-input v-model="formData.email" placeholder="邮箱" class="input-field" />
        </el-form-item>

        <el-form-item v-if="isPasswordLogin">
          <el-input type="password" v-model="formData.password" placeholder="密码" class="input-field" />
        </el-form-item>

        <el-form-item v-if="isPasswordLogin">
          <div class="login-option login-button" @click="handleSubmit(formRef)">登录</div>
        </el-form-item>
      </el-form>

      <div class="phone-register" v-if="isPasswordLogin" @click="toggleLoginMethod">使用快捷登录</div>
      <div class="phone-register" v-if="!isPasswordLogin" @click="toggleLoginMethod">使用账号密码登录</div>
    </div>
  </BlankLayout>
</template>

<script setup>
  import { ref } from "vue";

  const formData = ref({
    email: "",
    password: "",
  });

  const rules = {
    email: [
      { required: true, message: "请输入邮箱", trigger: "blur" },
      { type: "email", message: "请输入有效的邮箱地址", trigger: ["blur", "change"] },
    ],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  };

  const isPasswordLogin = ref(false); // 控制登录方式

  const handleSubmit = formEl => {
    formEl.validate(valid => {
      if (valid) {
        console.log("登录成功", formData.value);
        // 登录逻辑
      } else {
        console.log("登录失败");
        return false;
      }
    });
  };

  const toggleLoginMethod = () => {
    isPasswordLogin.value = !isPasswordLogin.value; // 切换登录方式
  };

  const loginWithWeChat = () => {
    console.log("微信登录");
    // 微信登录逻辑
  };

  const loginWithEmailCode = () => {
    console.log("邮箱验证码登录");
    // 邮箱验证码登录逻辑
  };

  const loginWithSMS = () => {
    console.log("使用短信验证登录");
    // 短信验证登录逻辑
  };
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .register {
    width: 100%;
    max-width: 500px;
    padding: 20px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #929292;

    .blod {
      color: #000;
      font-weight: 550;
    }
    .logo {
      width: 50%;
      margin-bottom: 20px;
    }
    .title {
      font-size: 44px;
      font-weight: 500;
      margin-bottom: 20px;
      letter-spacing: 4px;
    }
    .tips {
      color: #929292;
      font-size: 20px;
      margin-bottom: 20px;

      .login-link {
        color: #703ffa;
      }
    }
    .el-form {
      width: 100%;
      font-size: 18px;
      color: #929292;

      .input-field {
        height: 50px;
        font-size: 18px;
        :deep(.el-input__wrapper) {
          padding: 10px;
          border-radius: 10px;
          background: #f0f0f0 !important;
          .el-input__inner {
            height: 30px;
            line-height: 30px;
            border-radius: 8px;
            &::placeholder {
              color: #929292;
            }
          }
        }
      }
    }
    .login-option {
      font-size: 18px;
      color: #585858; // 文字颜色
      border: 1px solid #bababa; // 边框颜色
      border-radius: 10px; // 圆角
      padding: 10px; // 内边距
      width: 100%; // 宽度100%
      text-align: center; // 文本居中
      margin: 20px 0 0; // 间距
      font-weight: 600;
      letter-spacing: 2px;
      cursor: pointer; // 鼠标指针样式

      &:hover {
        background-color: #efefef; // 悬停时背景色
      }
      img {
        width: 30px;
        height: 30px;
        margin-right: 4px;
        vertical-align: middle;
      }
      &.login-button {
        background-color: #703ffa;
        color: white;
        border: 1px solid #703ffa; // 边框颜色
      }
    }
    .toggle-login {
      color: #703ffa;
      cursor: pointer;
      margin: 10px 0;
    }
    .phone-register {
      text-align: center;
      color: #bebebe;
      cursor: pointer;
    }
  }
  @media (max-width: $breakpoint-mobile) {
    .register {
      max-width: 100%;
      padding: 20px;
      .logo {
        width: 60%;
      }
      .title {
        font-size: 24px;
      }
      .tips {
        font-size: 16px;
      }
      .phone-register {
        font-size: 14px;
      }
      .el-form {
        font-size: 16px;
        .input-field {
          font-size: 16px;
          height: 40px;
        }
      }
      .login-option {
        font-size: 16px;
        height: 40px;
        line-height: 20px;
        margin: 10px 0;
        img {
          width: 20px;
          height: 20px;
        }
      }
      .toggle-login {
        font-size: 14px;
      }
    }
  }
</style>
